<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>海南热带雨林</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../layui/css/layui.css" rel="stylesheet">
</head>
<style>
    table {
        text-align: center;
    }

    .layui-table-cell {
        text-align: center !important;
    }

    .layui-layout-admin .layui-header, .layui-btn, .layui-bg-black, .layui-nav, .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #003078 !important;
    }

    .layui-layout-admin .layui-logo {
        width: 100%;
    }

    .layui-form-item {
        display: inline-block;
    }

    #query, #add {
        position: absolute;
        height: 37px;
        line-height: 37px;
        margin-left: 15px;
    }

    #add {
        margin-left: 95px;
        float: right;
    }

    .layui-header {
        height: 80px !important;
    }

    .layui-layout-admin .layui-side, .layui-layout-admin .layui-body {
        top: 80px !important;
    }

    .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
        background-color: #01aaed;
    }

</style>
<body style="overflow: hidden">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-form">

                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            时间范围
                        </div>
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="ID-laydate-start-date" class="layui-input"
                                       placeholder="开始日期" value="2024-01-01">
                            </div>
                            <div class="layui-form-mid">-</div>
                            <div class="layui-input-inline">
                                <input type="text" autocomplete="off" id="ID-laydate-end-date" class="layui-input"
                                       placeholder="结束日期" value="2024-01-20">
                            </div>
                        </div>
                    </div>
                </div>


                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            进线名
                        </div>
                        <input type="text" placeholder="请输入进线名" class="layui-input">
                    </div>
                </div>


                <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="edit" id="query">
                    <i class="layui-icon layui-icon-search" style="font-size: 15px;margin-right:5px "></i>
                    查询</a>

                <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="edit" id="add">
                    <i class="layui-icon layui-icon-prev" style="font-size: 15px;margin-right:5px "></i>
                    返回</a>

                <table class="layui-hide" id="demoTable">

                </table>
            </div>


            <div class="layui-col-xs12 layui-form">
<!--                <img style="width: 100%" src="./imgs/vct.png">-->

                                    <div class="layui-tab">
                                        <ul class="layui-tab-title">
                                            <li class="layui-this">VTC曲线</li>
                                            <li>SEMI F47曲线</li>
                                            <li>ITIC曲线</li>
                                        </ul>
                                        <div class="layui-tab-content">
                                            <div class="layui-tab-item layui-show"> <div id="container" style="height: 400px"></div></div>
                                            <div class="layui-tab-item">内容-2</div>
                                            <div class="layui-tab-item">内容-3</div>
                                        </div>
                                    </div>

            </div>
        </div>

    </div>
</div>

</div>

<script type="text/html" id="data-tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm" lay-event="detail">
            <i class="layui-icon layui-icon-eye" style="font-size: 15px;margin-right:5px "></i>
            查看波形
        </a>

    </div>
</script>


<script src="../../layui/layui.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.min.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'laydate', 'table', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var table = layui.table;

        // 创建表格实例
        table.render({
            elem: '#demoTable',
            page: false,
            cols: [[
                {field: 'no', title: '序号'},
                {field: 'timeId', title: '暂降发生时刻'},
                {field: 'ip', title: '网络参数'},
                {field: 'line', title: '监测点'},
                {field: 'scale', title: '电压等级'},
                {field: 'type', title: '触发类型'},
                {field: 'value', title: '残余电压'},
                {field: 'persistent', title: '持续时间(ms)'},
                {title: '操作', toolbar: '#data-tool'}
            ]],
            "data": [
                {
                    "no": 1,
                    "timeId": "2024-01-17 14:41:12.570",
                    "ip": "00-B7-8D-01-28-5D",
                    "line": "综合变1#配线进线",
                    "scale": "380V",
                    "type": "暂降",
                    "value": "57.6",
                    "persistent": "178"
                },
                {
                    "no": 2,
                    "timeId": "2024-01-15 14:39:05.534",
                    "ip": "00-B7-8D-01-28-5D",
                    "line": "综合变1#配线进线",
                    "scale": "380V",
                    "type": "暂降",
                    "value": "58",
                    "persistent": "272"
                },
                {
                    "no": 3,
                    "timeId": "2024-01-14 09:20:16.177",
                    "ip": "00-B7-8D-01-28-5D",
                    "line": "综合变1#配线进线",
                    "scale": "380V",
                    "type": "暂降",
                    "value": "28.6",
                    "persistent": "125"
                }, {
                    "no": 4,
                    "timeId": "2024-01-14 17:22:05.544",
                    "ip": "00-B7-8D-01-28-5D",
                    "line": "综合变1#配线进线",
                    "scale": "380V",
                    "type": "暂降",
                    "value": "56.9",
                    "persistent": "569"
                }, {
                    "no": 5,
                    "timeId": "2024-01-12 23:46:54.869",
                    "ip": "00-B7-8D-01-28-5D",
                    "line": "综合变1#配线进线",
                    "scale": "380V",
                    "type": "暂降",
                    "value": "37.8",
                    "persistent": "136"
                }
            ]
        });


        var laydate = layui.laydate;
        // 日期时间选择器
        laydate.render({
            elem: '#ID-laydate-type-datetime',
            type: 'datetime',
            fullPanel: true // 2.8+
        });

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });


    });

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        xAxis: {
            // name:'持续时间(ms)'
        },
        title: {
            text: "电压耐受曲线",
            textAlign: "center",
            x: 'center',
            top: '2%'
        },
        yAxis: {
            name: '幅值(p.u.)',
            max: 100
        },
        grid: {
            left: "2%",
            right: "1%",
            top: "10%"
        },
        color: ["blue", "blue"],
        series: [
            {
                data: [
                    [5, 0],
                    [5, 80],
                    [40, 80],
                ],
                type: 'line'
            },
            {
                data: [
                    [12, 0],
                    [12, 60],
                    [40, 60],
                ],
                type: 'line'
            },
            {
                name: 'I',
                type: 'scatter',
                color: ['green'],
                data: [
                    [2, 95],
                    [35, 86],
                    [3, 45],
                    [4, 75],
                    [22, 90],
                ],
            },
            {
                name: 'II',
                type: 'scatter',
                color: ['orange'],
                data: [
                    [6, 75],
                    [8, 32],
                    [11, 36],
                    [15, 62],
                    [32, 75],
                ],
            },
            {
                name: 'III',
                type: 'scatter',
                color: ['red'],
                data: [
                    [15, 55],
                    [23, 40],
                    [36, 26],
                    [28, 44],
                    [32, 55],
                ],
            },
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>